<template>
  <div>
    <book :items="data0" :title="title[0]" />
    <book :items="data1" :title="title[1]" />
    <book :items="data2" :title="title[2]" />
    <book :items="data3" :title="title[3]" />
  </div>
</template>

<script>
import book from "../../../components/listenMusic/book";
import { getBooksApi } from "../../../api/booksApi";
// const refreshButton=document.getElementById('refreshButton');
// const bookContainer = document.getElementById('bookContainer');

export default {
  components: {
    book,
  },
  data() {
    return {
      data0: [],
      data1: [],
      data2: [],
      data3: [],
      title: ["限时免费", "大家在听", "精品推荐", "人气书单"],
    };
  },
  async created() {
    let book = await getBooksApi();
    this.data0 = book.slice(3, 8);
    this.data1 = book.slice(1, 4);
    this.data2 = book.slice(2, 6);
    this.data3 = book.slice(5, 9);
  },
};
// 下面是测试刷新
// function refreshBooks() {
//   // 清空书籍容器
//   bookContainer.innerHTML = '';

//   // 从书籍列表中随机选择一批书籍
//   const randomBooks = getRandomBooks( data0, 4);

//   // 创建新的书籍元素并添加到容器中
//   randomBooks.forEach((item) => {
//     const bookElement = document.createElement('item');
//     bookElement.className = 'item';
//     bookElement.textContent = item;
//     bookContainer.appendChild(bookElement);
//   });
// }

// // 获取随机的书籍
// function getRandomBooks( data0, count) {
//   const randomBooks = [];

//   // 如果书籍列表不够数量，取整个列表
//   if (data0.length <= count) {
//     return data0;
//   }

//   while (randomBooks.length < count) {
//     const randomIndex = Math.floor(Math.random() * data0.length);
//     const randomBook = data0[randomIndex];

//     // 避免重复选择同一本书
//     if (!randomBooks.includes(randomBook)) {
//       randomBooks.push(randomBook);
//     }
//   }

//   return randomBooks;
// }

// // 绑定刷新按钮的点击事件
// refreshButton.addEventListener('click', refreshBooks);

// // 页面加载完成时刷新一次书籍
// refreshBooks();


</script>
<style lang="scss" scoped></style>
